<template>
  <view class="aster-area" v-show="props.show">
    <aster-picker
      :show="props.show"
      ref="asterPickerRef"
      :title="props.title"
      :columns="pickerParams.columns"
      :default-index="pickerParams.defaultIndex"
      :loading="pickerParams.loading"
      :visible-item-count="pickerParams.visibleItemCount"
      :key-name="pickerParams.keyName"
      :suffixs="pickerParams.suffixs"
      @cancel="cancel"
      @confirm="confirm"
      @change="change"
    />
  </view>
</template>
<script setup lang="ts">
  import AsterPicker from '@/components/common/aster-picker.vue';
  import { areaList } from '@vant/area-data';
  import { area_list } from '@/utils';
  import { BaseModel } from '@/services/model/baseModel';
  import { reactive, ref, watch } from 'vue';
  import { isEmpty } from '@/utils/is';

  const props = defineProps({
    show: {
      type: Boolean,
      default: () => false,
    },
    title: {
      type: String,
      default: () => '',
    },
    defaultValue: {
      type: String,
      default: () => '',
    },
  });

  const emits = defineEmits(['confirm', 'cancel']);

  const list = area_list(areaList);
  // 选择器
  const asterPickerRef = ref();
  const pickerParams = reactive({
    // 每一列的数据
    columns: <any[]>[],
    // 加载状态
    loading: false,
    // 每列中可见选项的数量
    visibleItemCount: 5,
    // 自定义需要展示的text属性键名
    keyName: 'name',
    // 各列默认值的索引
    defaultIndex: <number[]>[],
    // 各列的后缀值
    suffixs: <string[]>[],
  });

  watch(
    () => props.show,
    (newValue, oldValue) => {
      if (newValue) init();
    },
  );

  const init = () => {
    if (isEmpty(props.defaultValue)) {
      // 各列数据
      pickerParams.columns = [];
      pickerParams.columns.push(list.province);
      let city = list.city.filter((item: BaseModel) => {
        return item.value.slice(0, 2) == list.province[0].value.slice(0, 2);
      });
      pickerParams.columns.push(city);
      let country = list.county.filter((item: BaseModel) => {
        return item.value.slice(0, 4) == list.city[0].value.slice(0, 4);
      });
      pickerParams.columns.push(country);
      // 默认索引
      pickerParams.defaultIndex = [0, 0, 0];
    } else {
      // 默认值各列数据
      pickerParams.columns = [];
      pickerParams.columns.push(list.province);
      let city = list.city.filter((item: BaseModel) => {
        return item.value.slice(0, 2) == props.defaultValue.slice(0, 2);
      });
      pickerParams.columns.push(city);
      let country = list.county.filter((item: BaseModel) => {
        return item.value.slice(0, 4) == props.defaultValue.slice(0, 4);
      });
      pickerParams.columns.push(country);
      // 默认值下标
      const p = list.province.findIndex(
        (item: BaseModel) => item.value.slice(0, 2) == props.defaultValue.slice(0, 2),
      );
      const ci = city.findIndex(
        (item: BaseModel) => item.value.slice(0, 4) == props.defaultValue.slice(0, 4),
      );
      const co = city.findIndex((item: BaseModel) => item.value == props.defaultValue);
      pickerParams.defaultIndex.push(p);
      pickerParams.defaultIndex.push(ci);
      pickerParams.defaultIndex.push(co);
    }
  };

  const cancel = () => {
    emits('cancel');
  };
  const confirm = (e: any) => {
    emits('confirm', e);
  };
  const change = (e: any) => {
    if (e.columnIndex.value == 0) {
      let city = list.city.filter((item: BaseModel) => {
        return item.value.slice(0, 2) == e.value[0].value.slice(0, 2);
      });
      asterPickerRef.value.setColumnValues(1, city);

      let country = list.county.filter((item: BaseModel) => {
        return item.value.slice(0, 4) == city[0].value.slice(0, 4);
      });
      asterPickerRef.value.setColumnValues(2, country);
    }

    if (e.columnIndex.value == 1) {
      let country = list.county.filter((item: BaseModel) => {
        return item.value.slice(0, 4) == e.value[1].value.slice(0, 4);
      });
      asterPickerRef.value.setColumnValues(2, country);
    }
  };
</script>
<style lang="scss" scoped>
  .aster-area {
  }
</style>
